<template>
	<view class="main">
	    <view class="u-flex-col">
			<view class="u-flex-col head" >
				<image src="https://upload.file.jingcaijinghe.com/files/img/2024/03/12/1710233750967345.png" mode="widthFix" />
				<span>泾河新城</span>
			</view>
	    </view>
		<form @submit="onSubmit" @reset="formReset">
			<view class="u-flex-col van-form" >
				<view class="u-flex inpWapper">
					<span>手机号</span>
					<input type="text" v-model="phoneNumber" placeholder="请输入手机号" placeholder-style="color:#969799"/>
				</view>
				
				<view class="u-flex inpWapper" >
					<span>验证码</span>
					<input type="text" v-model="textCode" placeholder="请输入验证码" placeholder-style="color:#969799" style="width: calc(75% - 200upx);"/>
					<view  class="yzmBtn" @click="timeClock('login')">{{content}}</view>
				</view>
				
				<view style="margin: auto 0;">
					<button form-type="submit" plain class="btnSub">提交</button>
				</view>
		
			</view>
	    </form>
	</view>
</template>

<script>
	import cache from '../../utils/token.js'
	export default {
		data() {
			return {
				phoneNumber:'',
				dlmc: '',
				dlmm: '',
				seePwd:false,
				code:'',
				textCode:'',
				textSend:0,            //短信是否发送
				content: '发送验证码',  // 按钮里显示的内容
				totalTime: 60,       //记录具体倒计时时间
				canClick: true,      //添加canClick
				loginType:true,          //true密码登录 false验证码登录
				height:''
			}
		},
		onLoad() {
			uni.hideShareMenu()
		},
		onShow() {
			
		},
		methods: {
			onSubmit(values) {
				let that = this;
				var pattern = new RegExp("^1[3456789][0-9]{9}$", 'i');
				if(!pattern.test(this.phoneNumber)){
				  uni.showToast({
				    title: '请输入正确的手机号',
				    icon:'none',
				    duration: 2000
				  });
				  return;
				}
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				let params = {
					phone:this.phoneNumber,
					code:this.textCode
				};
				this.$func.request('/pc/auth/pc_login', params,'POST').then(res => {
					uni.hideLoading();
					that.$cache.setCache('token',res.data.token,that.$cache.token_time)
					uni.navigateBack({
						delta: 1
					})
				});
			},
		
			
			/**
			 * @Description: 倒计时
			 * @Author: zhangjing
			 */    
			timeClock(){
			  if (!this.canClick) return  //改动的是这两行代码
			  var pattern = new RegExp("^1[3456789][0-9]{9}$", 'i');
			  if(!pattern.test(this.phoneNumber)){
			    uni.showToast({
			      title: '请输入正确的手机号',
			      icon:'none',
			      duration: 2000
			    });
			    return;
			  }
			  this.onGetCode();
			  
			},
		
			/**
			 * @Description: 获取短信验证码
			 * @Author: zhangjing
			 * @param {*} phoneNumber
			 */ 
			onGetCode(){
			  let that = this;
			  uni.showLoading({
			  	title: '加载中',
			  	mask:true
			  });
			  let params = {
				  phone: this.phoneNumber
			  };
			  this.$func.request('/pc/auth/get_phone_code', params,'POST').then(res => {
			  	uni.hideLoading();
			  	that.textSend = 1;
			  	uni.showToast({
			  	  title: '验证码已发送',
			  	  duration: 2000
			  	});
			  	that.canClick = false
			  	that.content = that.totalTime + 's重新发送'
			  	let clock = setInterval(()=>{
			  		that.totalTime--
			  		that.content = that.totalTime + 's重新发送'
			  		if (that.totalTime < 0) {
			  		clearInterval(clock)
			  		that.content = '重新发送'
			  		that.totalTime = 60
			  		that.onGetImgCode();
			  		that.canClick = true  //这里重新开启
			  		}
			  	},1000)
			  });
			  
			} ,  
		
			initData(){
			  this.phoneNumber = '';
			  this.code = '';
			  this.textCode = '';
			  this.textSend = 0           //短信是否发送
			  this.content = '发送验证码';  // 按钮里显示的内容
			  this.totalTime =  60;      //记录具体倒计时时间
			  this.canClick =  true;     //添加canClick
			},
		
			
			
		}
	}
</script>

<style>
	.main{
	  margin: auto 0;
	  width: 100vw;
	  position: relative;
	  background-color: #fff;
	}
	
	.bgimg{
	  position: absolute;
	  width: 100%;
	  height: auto;
	}
	
	.head{
	  z-index: 99;
	}
	
	.head image{
	  width: 250upx;
	  margin: 80upx auto 40upx;
	}
	
	.head span{
	  color: #FFF;
	  text-align: center;
	  margin: 0 auto auto;
	  font-size: 40upx;
	}
	
	.forget{
	  height: 100upx;
	  line-height: 100upx;
	  font-size: 30upx;
	}
	
	.forget span:first-of-type{
	  color: #888;
	  margin: auto auto auto 0;
	}
	
	.forget span:last-of-type{
	  color: #ff4848;
	  margin: auto 0 auto auto;
	}
	
	.van-form{
	    padding: 0 50upx;
	}
	
	.codeImg{
	  width: 200upx;
	  height: auto;
	  margin: auto 0;
	}
	
	.register{
	  justify-content: center;
	  font-size: 28upx;
	  margin: 0 auto auto;
	}
	
	.register span{
	  color: #479bf6;
	}
	
	.inpWapper{
		font-size: 34upx;
		height: 100upx;
		border-bottom: 0.1px solid #f8f8f8;
	}
	
	.inpWapper span,.inpWapper input{
		height: 100%;
		line-height: 100upx;
	}
	
	.inpWapper span{
		color: #333;
		width: 25%;
	}
	
	.inpWapper .icon,.inpWapper .img_icon{
		margin: auto 0 auto 50upx;
	}
	
	.inpWapper .img_icon{
		width: 40upx;
	}
	
	
	.btnSub{
		background: #0256FF!important;
		border: none!important;
		color: #fff!important;
		font-size: 30upx;
		padding: 10upx 0;
		margin-top: 100upx;
	}
	
	.btnSub::after{
		border: none!important;
	}
	
	.yzmBtn{
		border: 0.5px solid #0256FF!important;
		color: #0256FF!important;
		font-size: 30upx;
		height: 60upx;
		width: 200rpx;
		line-height: 60upx;
		margin: auto 0 auto auto;
		text-align: center;
		border-radius: 10rpx;
	}
</style>
